<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, this is browser ui.</title>
</head>
<body>
<h2>UI - Cross Domain - Ajax with JSONP</h2>

<table border="1px solid">
    <tbody>
    <tr>
        <td>演示步骤</td>
        <td>说明</td>
    </tr>
    <tr>
        <td>步骤1</td>
        <td>点击方法1按钮，通过动态加装脚本的方式，向9001端口的应用发送一个简单的JSONP GET请求，请求将成功，将弹出提示框显示请求结果。</td>
    </tr>
    <tr>
        <td>步骤2</td>
        <td>点击方法2按钮，通过JQuery Ajax的方式，向9001端口的应用发送一个JSONP请求，请求将成功，将弹出提示框显示请求结果。</td>
    </tr>
    <tr>
        <td>步骤3</td>
        <td>点击演示3按钮，直接向9001端口的应用发送一个Ajax请求，请求将失败</td>
    </tr>
    </tbody>
</table>

<br/>

<div>
    <div>方法1 - send a get request with jsonp</div>
    <div>
        <button id="btn_send_ajax_jsonp">通过动态加装脚本的方式，发送一个简单跨域ajax请求，成功执行</button>
    </div>
</div>

<div>
    <div>方法2 - send ajax with jquery jsonp</div>
    <div>
        <button id="btn_send_ajax_jquery_jsonp">通过JQuery发送一个简单跨域ajax请求，成功执行</button>
    </div>
</div>

<div>
    <div>演示3 - send a simple cross domain ajax </div>
    <div>
        <button id="btn_send_ajax_error">通过JQuery发送一个简单跨域ajax请求，被浏览器拒绝（请按F12进入浏览器调试控制台查看）</button>
    </div>
</div>

<ol>
    <li><a href="http://localhost:9001/index.html">用户服务-首页</a></li>
    <li><a href="/">Go UI Home</a></li>
</ol>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $("#btn_send_ajax_jsonp").click(function () {
        // send a get request to user domain api: /demo/jsonp
        // execute the script by returns
        loadScript('http://localhost:9001/api/demo/jsonp?callback=callback&user=michael');
    });

    $("#btn_send_ajax_jquery_jsonp").click(function () {
        $.ajax({
            url: 'http://localhost:9001/api/demo/jsonp',
            type: "GET",
            data: "user=michael",
            dataType: "jsonp",
            jsonpCallback: "callback"
        });
    });

    $("#btn_send_ajax_error").click(function () {
        $.ajax({
            url: 'http://localhost:9001/api/demo/jsonp',
            type: "GET",
            data: "user=michael",
            success: function (data, status, ajax) {
                alert("成功实现跨域请求，返回消息是：" + data);
            },
            error: function () {
                alert("向9001端口应用服务发送跨域请求失败，无法完成该请求。");
            }
        });
    });

    function loadScript(src) {
        var script = document.createElement('script');
        script.setAttribute("type", "text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }

    function callback(message) {
        alert("成功收到通过JSONP访问跨域API的返回消息，" + message);
    }
</script>
</html>